require("./base-css.js");
require("../css/editor-settings.css");
var React = require("react");

var EditorSettings = React.createClass({
	render: function () {
		return (
			<div className="w-editor-settings">
				<p>
					<label>
						<span className="w-label">Theme:</span>
						<select
							value={this.props.theme}
							onChange={this.props.onThemeChange}
							className="form-control">
							<option value="default">default</option>
							<option value="ambiance">ambiance</option>
							<option value="blackboard">blackboard</option>
							<option value="cobalt">cobalt</option>
							<option value="eclipse">eclipse</option>
							<option value="elegant">elegant</option>
							<option value="erlang-dark">erlang-dark</option>
							<option value="lesser-dark">lesser-dark</option>
							<option value="midnight">midnight</option>
							<option value="monokai">monokai</option>
							<option value="neat">neat</option>
							<option value="night">night</option>
							<option value="rubyblue">rubyblue</option>
							<option value="solarized dark">solarized dark</option>
							<option value="solarized light">solarized light</option>
							<option value="twilight">twilight</option>
							<option value="vibrant-ink">vibrant-ink</option>
							<option value="xq-dark">xq-dark</option>
							<option value="xq-light">xq-light</option>
						</select>
					</label>
				</p>
				<p>
					<label>
						<span className="w-label">Font size:</span>
						<select
							value={this.props.fontSize}
							onChange={this.props.onFontSizeChange}
							className="form-control">
							<option value="13px">13px</option>
							<option value="14px">14px</option>
							<option value="16px">16px</option>
							<option value="18px">18px</option>
							<option value="20px">20px</option>
							<option value="22px">22px</option>
							<option value="24px">24px</option>
							<option value="26px">26px</option>
							<option value="28px">28px</option>
							<option value="30px">30px</option>
							<option value="32px">32px</option>
							<option value="34px">34px</option>
							<option value="36px">36px</option>
						</select>
					</label>
				</p>
				<p className="w-editor-settings-box">
					<label>
						<input
							checked={this.props.lineNumbers}
							onChange={this.props.onLineNumberChange}
							type="checkbox"
						/>{" "}
						Show line number
					</label>
				</p>
				<p className="w-editor-settings-box">
					<label>
						<input
							checked={this.props.lineWrapping}
							onChange={this.props.onLineWrappingChange}
							type="checkbox"
						/>{" "}
						Auto line wrapping
					</label>
				</p>
			</div>
		);
	}
});

module.exports = EditorSettings;
